<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-button v-if="~accessable.indexOf('gas_station:manage_add')" class="filter-item" type="primary" v-waves icon="el-icon-plus" @click="handleUpdate(null)">添加</el-button> -->
      <el-input
        size="small"
        @keyup.enter.native="handleFilter"
        style="width: 200px;"
        class="filter-item"
        placeholder="油站名称"
        v-model="filters.like$name"
      ></el-input>
      <el-input
        size="small"
        @keyup.enter.native="handleFilter"
        style="width: 200px;"
        class="filter-item"
        placeholder="油站编码"
        v-model="filters.code"
      ></el-input>
      <el-select size="small" v-model="filters['state']" clearable placeholder="状态">
        <el-option v-for="(item,index) in isok" :key="index" :label="item" :value="index"></el-option>
      </el-select>
      <el-button
        size="small"
        class="filter-item"
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        size="small"
        class="filter-item"
        v-if="~accessable.indexOf('gas_station:manage_modify')"
        type="primary"
        v-waves
        icon="el-icon-document"
        @click="exportExcelFile"
      >导出</el-button>
    </div>
    <el-table
      :data="list"
      :height="tableHeight"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="操作"
        fixed="left"
        width="110"
        class-name="small-padding"
        v-if="~accessable.indexOf('gas_station:manage_modify')"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
      <el-table-column align="center" type="index" label="序号" width="80" fixed="left"></el-table-column>

      <el-table-column prop="name" align="center" label="油站名称" width="120" fixed="left">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="addr" align="center" label="油站街道地址" width="120" fixed="left">
        <template slot-scope="scope">
          <span>{{scope.row.addr}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="phone" align="center" label="电话号码" width="120" fixed="left">
        <template slot-scope="scope">
          <span>{{scope.row.phone}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="province" align="center" label="油站所在省份" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.province}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="city" align="center" label="油站所在市" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.city}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="area" align="center" label="油站所在区" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.area}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="image" align="center" label="油站图片" width="120">
        <template slot-scope="scope">
          <img
            src="../../assets/gas_station_closed.jpg"
            v-if="scope.row.image && scope.row.state === 0"
            alt
            style="max-width:100px;"
          />
          <img
            :src="scope.row.image|absUrl"
            v-if="scope.row.image && scope.row.state !== 0"
            alt
            style="max-width:100px;"
          />
        </template>
      </el-table-column>

      <el-table-column prop="longitude" align="center" label="经度" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.longitude}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="latitude" align="center" label="纬度" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.latitude}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="state" align="center" label="状态" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.state|oilStatusTypeFilter">{{scope.row.state|oilStatusFilter}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="isVip" align="center" label="支持vip会员卡" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.isVip|supportFilter}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="mapAdr" align="center" label="地图地址" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.mapAdr}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="code" align="center" label="油站编码" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="region" align="center" label="油站所在大区" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.region|regionFilter}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="isselfpay" align="center" label="自助支付" width="120">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.isselfpay|oilStatusTypeFilter"
          >{{scope.row.isselfpay|supportFilter}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="aheadPay" align="center" label="前庭支付" width="120">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.aheadPay|oilStatusTypeFilter"
          >{{scope.row.aheadPay|supportFilter}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="iseinvoice" align="center" label="电子发票" width="120">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.iseinvoice|oilStatusTypeFilter"
          >{{scope.row.iseinvoice|supportFilter}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="isselfpaydidi" align="center" label="滴滴自支付" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isselfpaydidi|oilStatusTypeFilter">
            <span>{{scope.row.isselfpaydidi|supportFilter}}</span>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="iscarnumpay" align="center" label="车牌付" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.iscarnumpay|oilStatusTypeFilter">
            <span>{{scope.row.iscarnumpay|supportFilter}}</span>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="iscarnumpay" align="center" label="水果100-30" width="120">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isFruitSite|oilStatusTypeFilter">
            <span>{{scope.row.isFruitSite|supportFilter}}</span>
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog title="标签管理" :visible.sync="dialogFormVisible">
      <el-form
        class="dialog-form"
        :rules="rules"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="120px"
      >
        <!-- <el-form-item label="油站名称" prop="name">

          <el-input v-model="temp.name" placeholder="油站名称"></el-input>

        </el-form-item>

        <el-form-item label="油站街道地址" prop="addr">

          <el-input v-model="temp.addr" placeholder="油站街道地址"></el-input>

        </el-form-item>
        <el-form-item label="地图地址" prop="mapAdr">

          <el-input v-model="temp.mapAdr" placeholder="地图地址"></el-input>

        </el-form-item>

        <el-form-item label="油站编码" prop="code">

          <el-input v-model="temp.code" placeholder="油站编码"></el-input>

        </el-form-item>
        -->
        <el-form-item label="油站图片" v-if="temp.state !== 0" prop="image">
          <el-upload
            class="avatar-uploader"
            :action="UPLOAD_URL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess('image')"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="temp.image" :src="temp.image|absUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!--
        <el-row>
          <el-col :span="12">
            <el-form-item label="电话号码" prop="phone">

              <el-input v-model="temp.phone" placeholder="电话号码"></el-input>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="油站所在省份" prop="province">

              <el-input v-model="temp.province" placeholder="油站所在省份"></el-input>

            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">

            <el-form-item label="油站所在市" prop="city">

              <el-input v-model="temp.city" placeholder="油站所在市"></el-input>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="油站所在区" prop="area">

              <el-input v-model="temp.area" placeholder="油站所在区"></el-input>

            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude">

              <el-input v-model="temp.longitude" placeholder="经度"></el-input>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude">

              <el-input v-model="temp.latitude" placeholder="纬度"></el-input>

            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">

            <el-form-item label="是否可用" prop="state">

              <el-select v-model="temp.state" placeholder="请选择">
                <el-option v-for="(label,value) in isok" :key="value" :label="label" :value="value">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="油站所在大区" prop="region">

              <el-select v-model="temp.region" placeholder="请选择">
                <el-option v-for="(label,value) in regionData" :key="value" :label="label" :value="value">
                </el-option>
              </el-select>

            </el-form-item>

          </el-col>
        </el-row>-->
        <el-row>
          <el-col :span="24">
            <el-form-item label="油站标签" prop="propsList">
              <el-checkbox
                v-if="prop.propsValue=='支持'"
                @change="onChangeProp(prop)"
                v-model="prop.showFlag"
                :true-label="1"
                :false-label="0"
                v-for="prop in temp.propsList"
                :key="prop.id"
              >{{prop.propsName}}</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="vip会员卡" prop="isVip">

              <el-select v-model="temp.isVip" placeholder="请选择">
                <el-option v-for="(label,value) in supportFilter" :key="value" :label="label" :value="value">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="自支付" prop="isselfpay">

              <el-select v-model="temp.isselfpay" placeholder="请选择">
                <el-option v-for="item in supportFilter2" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>

            </el-form-item>

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="前庭支付" prop="aheadPay">

              <el-select v-model="temp.aheadPay" placeholder="请选择">
                <el-option v-for="(label,value) in supportFilter" :key="value" :label="label" :value="value">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="电子发票" prop="iseinvoice">

              <el-select v-model="temp.iseinvoice" placeholder="请选择">
                <el-option v-for="item in supportFilter2" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="12">

            <el-form-item label="滴滴支付" prop="isselfpaydidi">

              <el-select v-model="temp.isselfpaydidi" placeholder="请选择">
                <el-option v-for="item in supportFilter2" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>

            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌付" prop="iscarnumpay">

              <el-select v-model="temp.iscarnumpay" placeholder="请选择">
                <el-option v-for="(label,value) in supportFilter" :key="value" :label="label" :value="value">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">

            <el-form-item label="水果100-30" prop="isFruitSite">

              <el-select v-model="temp.isFruitSite" placeholder="请选择">
                <el-option v-for="item in supportFilter2" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>

            </el-form-item>

          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
        <!-- <el-button type="primary" @click="dialogFormVisible = false">确定</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
let regionData = ["广州", "粤东", "粤西"];
let supportFilter = ["不支持", "支持"];
let supportFilter2 = [
  {
    value: false,
    label: "不支持"
  },
  {
    value: true,
    label: "支持"
  }
];
let isok = ["停业", "营业", "退出"];
export default {
  data() {
    return {
      tableHeight: 400,
      supportFilter,
      supportFilter2,
      total: 0,
      regionData,
      isok,
      temp: {
        id: "",
        propsList: [],
        image: "",
        state: ""
      },

      rules: {
        name: [
          {
            required: true,
            message: "油站名称不能为空"
          }
        ],

        addr: [
          {
            required: true,
            message: "油站街道地址不能为空"
          }
        ],

        phone: [
          {
            required: true,
            message: "电话号码不能为空"
          }
        ],

        province: [
          {
            required: true,
            message: "油站所在省份不能为空"
          }
        ],

        city: [
          {
            required: true,
            message: "油站所在市不能为空"
          }
        ],

        area: [
          {
            required: true,
            message: "油站所在区不能为空"
          }
        ],

        image: [
          {
            required: true,
            message: "油站图片不能为空"
          }
        ],

        longitude: [
          {
            required: true,
            message: "经度不能为空"
          }
        ],

        latitude: [
          {
            required: true,
            message: "纬度不能为空"
          }
        ],

        state: [
          {
            required: true,
            message: "请指定可用状态"
          }
        ],

        isVip: [
          {
            required: true,
            message: "请选择VIP支付状态"
          }
        ],

        code: [
          {
            required: true,
            message: "油站编码不能为空"
          }
        ],

        region: [
          {
            required: true,
            message: "请选择所在大区"
          }
        ],

        isselfpay: [
          {
            required: true,
            message: "不能为空",
            trigger: "change"
          }
        ],

        aheadPay: [
          {
            required: true,
            message: "前庭支付",
            trigger: "change"
          }
        ],

        iseinvoice: [
          {
            required: true,
            message: "请选择是否支持电子发票",
            trigger: "change"
          }
        ],

        isselfpaydidi: [
          {
            required: true,
            message: "请选择是否支持滴滴支付",
            trigger: "change"
          }
        ],

        iscarnumpay: [
          {
            required: true,
            message: "请选择是否支持车牌付",
            trigger: "change"
          }
        ],
        isFruitSite: [
          {
            required: true,
            message: "水果100-30",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.init("gas_station", 1).loadData();
    this.tableHeight = window.innerHeight - 300;
  },
  filters: {
    supportFilter(v) {
      if (v === true) {
        v = 1;
      } else if (v === false) {
        v = 0;
      }
      return supportFilter[parseInt(v)];
    },
    regionFilter(v) {
      return regionData[parseInt(v)];
    },
    oilStatusTypeFilter(v) {
      if (v === true) {
        v = 1;
      } else if (v === false) {
        v = 0;
      }
      return ["danger", "success", "primary"][parseInt(v)];
    },
    oilStatusFilter(v) {
      return isok[parseInt(v)];
    }
  },
  methods: {
    onChangeProp(prop) {
      this.$post("/admin/gas_station/props/set", {
        id: prop.id,
        showFlag: prop.showFlag
      });
    },
    handleUpdate(row) {
      this.dialogFormVisible = true;
      this.isEditing = true;
      this.loadDetail(row.id);
    },
    submitFormAction() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.submiting = true;
          const postData = Object.assign({}, this.temp);
          // delete postData.createTime
          // delete postData.modifyTime
          delete postData.propsList;
          this.$post("/admin/gas_station/save", postData)
            .then(() => {
              this.submiting = false;
              this.dialogFormVisible = false;
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
                duration: 2000
              });
              this.loadData();
            })
            .catch(info => {
              this.submiting = false;
              // this.$message({
              //   type: "warning",
              //   message: info || "更新失败!"
              // });
            });
        }
      });
    },
    loadDetail(id) {
      this.$post("/admin/gas_station/detail", { id }).then(data => {
        Object.keys(this.temp).forEach(key => {
          if (key in data) {
            this.temp[key] = data[key];
          }
        });
      });
    },
    exportExcelFile() {
      this.exportExcel({
        title: "",
        fields: [
          {
            field: "name",
            title: "油站名称"
          },

          {
            field: "addr",
            title: "油站街道地址"
          },

          {
            field: "phone",
            title: "电话号码"
          },

          {
            field: "province",
            title: "油站所在省份"
          },

          {
            field: "city",
            title: "油站所在市"
          },

          {
            field: "area",
            title: "油站所在区"
          },

          {
            field: "image",
            title: "油站图片地址"
          },

          {
            field: "longitude",
            title: "经度"
          },

          {
            field: "latitude",
            title: "纬度"
          },

          {
            field: "state",
            title: "状态"
          },

          {
            field: "isVip",
            title: "是否支持vip会员卡   1支持  0不支持"
          },

          {
            field: "code",
            title: "油站编码"
          },

          {
            field: "bankCardPrivilege",
            title: "支持的银行卡优惠，以分号隔开"
          },

          {
            field: "region",
            title: "油站所在大区 0"
          },

          {
            field: "isselfpay",
            title: ""
          },

          {
            field: "aheadPay",
            title: "是否支持前庭支付 0：不支持   1：支持"
          },

          {
            field: "iseinvoice",
            title: ""
          },

          {
            field: "isselfpaydidi",
            title: "滴滴支付"
          },
          {
            field: "isFruitSite",
            title: "水果100-30"
          },

          {
            field: "iscarnumpay",
            title: "是否支持车牌付 1支持 0不支持"
          }
        ]
      }).then(info => {
        this.openWin(info);
      });
    }
  }
};
</script>
